<template>
  <view class="flex-col">
    <navbar title="地方题库" mode="navbarBg">
      <template v-slot:bottom>
        <TiyanDialog :nav="true"></TiyanDialog>
      </template>
    </navbar>
    <view style="height: 10upx"/>
    <view class="shorthand-items-container">
      <view class="shorthand-item" v-for="(item,i) in list" :key="i" @click="itemAction(item)">
        <text class="city">{{ item.city }}</text>
        <text class="title">{{ item.title }}</text>
        <text class="desc">(共{{ item.count || 0 }}题)</text>
        <view class="num">{{ pinyin[item.city] }}</view>
        <view class="left"></view>
      </view>
    </view>
    <ADIntercept ref="ADIntercept"></ADIntercept>
  </view>
</template>

<script>
import navbar from "@/components/navbar";
import {questionApi} from "@/api";
import ADIntercept from "@/components/ADIntercept.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {TiyanDialog, ADIntercept, navbar},
  data() {
    return {
      kemu: '',
      list: [],
      pinyin: {
        '上海':'SH',
        '湖南':'HN',
        '浙江':'ZZ',
        '江西':'JX',
        '四川':'SC',
        '福州':'FZ',
        '济南':'JN',
        '天津':'TJ',
        '河南':'HN',
        '贵州':'GZ',
        '重庆':'CQ'
      }
    }
  },
  async onLoad({kemu}) {
    this.kemu = kemu
    const res = await questionApi.locationList(kemu)
    this.list = res.data.data.list
    this.list.map(item => {
      item.city = item.title.split('地方题')[0]
    })
  },
  methods: {
    async itemAction(item) {
      try {
        await this.$refs.ADIntercept.tryOpen()
        uni.navigateTo({
          url: `/pages/detail/detail?type=tag_${item.id}&kemu=` + this.kemu + `&title=${item.title}` + '&bigType=location_question'
        });
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F9F9F9;
}

.navbarBg {
  background-color: #F9F9F9;
}

.shorthand-items-container {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10rpx;
  .shorthand-item {
    margin-left: 22rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 333rpx;
    height: 414upx;
    margin-bottom: 24rpx;
    border-radius: 32rpx;
    background: linear-gradient( 180deg, #678DFF 0%, #9FB7FF 100%);
    color: #fff;
    padding-top: 56rpx;
    padding-left: 52rpx;
    position: relative;
    overflow: hidden;
    .left {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 40rpx;
      background-color: rgba(0, 0, 0, 0.1);
    }
    .location {
      width: 32upx;
      height: 40upx;
    }
    .num {
      font-size: 150rpx;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.4);
      position: absolute;
      right: 20rpx;
      bottom: -35rpx;
    }
    .city {
      font-size: 56rpx;
      font-weight: bold;
    }

    .title {
      font-weight: bold;
      font-size: 30upx;
      margin-top: 16rpx;
    }

    .desc {
      font-size: 28upx;
    }
  }
}
</style>
